<template>
	<!-- 全部订单中的订单一个订单 -->
	<view>
		<view class="order-info">
			<view class="order-header">
				<text class="order-time">{{ item.orderTime }}</text>
				<text class="order-status">{{ orderStatus }}</text>
			</view>
			<view class="order-items">
				<scroll-view scroll-x="true" class="scroll-view" :show-scrollbar="false">
					<view class="items">
						<view class="item" v-for="(element, index) in item.orderDetailList" :key="index">
							<img :src="element.image" :alt="element.name" class="item-image">
							<text class="item-name">{{ element.name }}</text>
						</view>

					</view>
				</scroll-view>
				<view class="order-total">
					<text class="total-price">¥{{ item.amount }}</text>
					<text class="total-quantity">共 {{ item.orderDetailList.length }} 件</text>
				</view>
			</view>

			<view class="order-actions">
				<!-- <navigator url="/pages/home/home"> -->
				<!-- <view class="reorder-button" @click.passive="handleHome" @touchmove.stop.prevent>再来一单</view> -->
				<!-- </navigator> -->
				<button class="pay-button" v-show="!item.payStatus" @touchmove.stop.prevent>去支付</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'


const { item } = defineProps({
	item: {
		type: Object,
		default: {}
	}
})



console.log(item.status, item.payStatus);

// 模拟订单数据
const orderTime = '2021-12-21 12:00'
const orderStatus = ref('')

if (item.status === 0) orderStatus.value = '待付款'
else if (item.status === 1) orderStatus.value = '待接单'
else if (item.status === 2) orderStatus.value = '已接单'
else if (item.status === 3) orderStatus.value = '已完成'
else if (item.status === 4) orderStatus.value = '已取消'


// 再来一单，返回首页
const handleHome = () => {
	uni.switchTab({ url: '/pages/home/home' })
}

</script>
<style scoped lang="scss">
.order-info {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 30rpx;

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.order-time {
			font-size: 34rpx;
		}

		.order-status {
			font-size: 34rpx;
			color: #FF5000;
			font-weight: 600;
		}
	}

	.order-items {
		display: flex;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// position: relative;

		.items {
			display: flex;
			flex-direction: row;

			.item {
				margin-right: 20rpx;

				.item-image {
					width: 160rpx;
					height: 130rpx;
					object-fit: cover;
					border-radius: 20rpx;
				}

				.item-name {
					display: block;
					font-size: 30rpx;
					width: 160rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}

		.order-total {
			display: flex;
			height: 100%;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;

			.total-price {
				font-size: 38rpx;
			}

			.total-quantity {
				font-size: 30rpx;
			}
		}
	}

	.order-actions {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: flex-end;
		gap: 20rpx;

		.reorder-button {
			padding: 0;
			padding: 0 30rpx;
			height: 70rpx;
			line-height: 70rpx;
			border: 1rpx #e2e2e2 solid;
			border-radius: 4px;
			margin: 0;
			background-color: #F8F8F8;
		}

		.pay-button {
			padding: 0 30rpx;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #FF5000;
			border: none;
			border-radius: 4px;
			color: white;
			margin: 0;
		}
	}
}



.scroll-view {
	white-space: nowrap;
	width: 80%;
}
</style>
<style></style>